<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" size="mini" class="form-filter">
            <el-form-item label="订单号">
                <el-input v-model="filter.orderNo" placeholder="请输入条件查询" @change="getPage()"/>
            </el-form-item>

            <el-form-item label="收货人手机号">
                <el-input v-model="filter.consigneeMobile" placeholder="请输入条件查询" @change="getPage()"/>
            </el-form-item>

            <el-form-item label="订单状态" prop="orderStatus">
                <el-select v-model="filter.orderStatus" clearable filterable placeholder="请选择" style="width:200px;">
                    <el-option
                        v-for="item in Dict.enums.orderStatusList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="发货状态" prop="expressStatus">
                <el-select v-model="filter.expressStatus" clearable filterable placeholder="请选择" style="width:200px;">
                    <el-option
                        v-for="item in Dict.enums.expressStatusList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + (page.current - 1) * page.size + 1 }}
                    </template>
                </el-table-column>
                <el-table-column width="180" prop="orderNo" label="订单号"/>
                <el-table-column min-width="200" prop="orderName" label="订单名称"/>
                <el-table-column width="80" prop="totalMoney" label="订单金额"/>
                <el-table-column width="80" prop="totalGoodsNum" label="商品数量"/>

                <el-table-column width="80" label="订单状态">
                    <template #default="scope">
                        <el-tag :type="scope.row.orderStatusStyle">
                            {{ scope.row.orderStatusName }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column width="80" label="发货状态">
                    <template #default="scope">
                        <el-tag :type="scope.row.expressStatusStyle">
                            {{ scope.row.expressStatusName }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="remark" label="用户备注"/>
                <el-table-column prop="serviceRemark" label="客服备注"/>
                <el-table-column width="160" prop="createTime" label="下单时间"/>
                <el-table-column width="80" prop="updateName" label="更新人"/>
                <el-table-column width="160" prop="updateTime" label="更新时间"/>

                <el-table-column fixed="right" label="操作" min-width="200">
                    <template #default="scope">
                        <el-button
                            slot="reference"
                            size="mini" type="text"
                            style="margin:0 0px 10px 10px;"
                            @click="showUpdateServiceRemark(scope.row)"
                        >备注
                        </el-button>

                        <el-popconfirm
                            v-if="scope.row.isShowConfirmOrderBtn"
                            title="确定操作确认订单吗？"
                            @onConfirm="confirmOrder(scope.row.orderNo)"
                        >
                            <el-button slot="reference" size="mini" type="text" style="margin:0 0px 10px 10px;">确认订单</el-button>
                        </el-popconfirm>

                        <el-button
                            v-if="scope.row.isShowPayBtn"
                            slot="reference"
                            size="mini" type="text"
                            style="margin:0 0px 10px 10px;"
                            @click="showOrderPay(scope.row.orderNo)"
                        >设为已支付
                        </el-button>

                        <el-popconfirm
                            v-if="scope.row.isShowCancelOrderBtn"
                            title="确定取消订单吗？"
                            @onConfirm="cancelOrder(scope.row.orderNo)"
                        >
                            <el-button
                                slot="reference"
                                size="mini" type="text"
                                style="margin:0 0px 10px 10px;"
                            >取消订单
                            </el-button>
                        </el-popconfirm>

                        <el-button
                            v-if="scope.row.isShowShipmentsBtn"
                            slot="reference"
                            size="mini" type="text"
                            style="margin:0 0px 10px 10px;"
                            @click="showShipments(scope.row.orderNo)"
                        >发货
                        </el-button>

                        <el-button
                            v-if="scope.row.isShowShipmentsBtn"
                            slot="reference"
                            size="mini" type="text"
                            style="margin:0 0px 10px 10px;"
                            @click="printShipmentsOrder(scope.row.orderNo)"
                        >打印发货单
                        </el-button>

                        <el-popconfirm
                            v-if="scope.row.isShowCompleteOrderBtn"
                            title="确定完成订单吗？"
                            @onConfirm="completeOrder(scope.row.orderNo)"
                        >
                            <el-button
                                slot="reference"
                                size="mini" type="text"
                                style="margin:0 0px 10px 10px;"
                            >完成订单
                            </el-button>
                        </el-popconfirm>

                        <el-button
                            size="mini" type="text"
                            style="margin:0 0px 10px 10px;"
                            @click="showOrderDetail(scope.row.orderNo)"
                        >详情
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <UpdateServiceRemark ref="updateServiceRemarkRef" @refresh="getPage()"/>
            <OrderPay ref="orderPayRef" @refresh="getPage()"/>
            <OrderDetail ref="orderDetailRef"/>
        </div>
    </section>
</template>
<script>
import {OrderApi} from '@/api/food/order'
// import {useRouter} from 'vue-router'
import OrderDetail from './OrderDetail.vue'
import OrderPay from './OrderPay.vue'
import UpdateServiceRemark from './UpdateServiceRemark.vue'

export default {
    name: 'FoodOrderIndex',
    components: {
        OrderDetail, OrderPay,UpdateServiceRemark
    },
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {
                orderNo: '',
                consigneeMobile: '',
                orderStatus: '',
                expressStatus: ''
            },
            loading: false,
            goodsClassList: [],
            brandList: [],
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.getPage()
    },
    methods: {

        // 获取用户列表
        getPage() {
            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size,
                orderNo: this.filter.orderNo,
                consigneeMobile: this.filter.consigneeMobile,
                orderStatus: this.filter.orderStatus,
                expressStatus: this.filter.expressStatus
            }

            this.loading = true
            OrderApi.getPage(params).then((response) => {
                response.records.forEach(item => {
                    item.totalMoney = item.totalMoney / 100
                })

                this.page = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        },

        confirmOrder(orderNo) {
            OrderApi.confirmOrder(orderNo).then((response) => {
                this.getPage()
            }).catch((err) => {
            })
        },
        cancelOrder(orderNo) {
            OrderApi.cancelOrder(orderNo).then((response) => {
                this.getPage()
            }).catch((err) => {
            })
        },
        completeOrder(orderNo) {
            OrderApi.completeOrder(orderNo).then((response) => {
                this.getPage()
            }).catch((err) => {
            })
        },

        showOrderDetail(orderNo) {
            this.$refs['orderDetailRef'].showUpdate(orderNo)
        },

        showUpdateServiceRemark(data) {
            this.$refs['updateServiceRemarkRef'].showUpdate(data)
        }



    }
}

</script>

<style lang="scss" scoped></style>
